<template>
<section>
	<header>
			<ul>
				<li>
					<a href="#"><img src="../image/left.png" alt=""></a>
				</li>
				<li>
					<span>综合搜索</span>
				</li>
				<li>
					<a href="#"><img src="../image/right-1.png" alt=""></a>
					<a href="#"><img src="../image/right-2.png" alt=""></a>
				</li>
			</ul>
		</header>


		<div class="search">

			<a href="#"><span>北京</span></a><span><img src="../image/fangdajing.png" alt=""></span><input type="text" placeholder="目的地/景点/酒店/邮轮">
		</div>
			
			<div class="hot">
				热门搜索
			</div>

			<div class="cent">
				<ul>
					<li><a href="#">欢乐谷</a></li>
					<li><a href="#">北京欢乐谷欢乐谷</a></li>
					<li><a href="#">北京</a></li>
					<li><a href="#">北京欢乐谷北京欢乐谷</a></li>
					<li><a href="#">北京</a></li>
					<li><a href="#">北京欢乐谷</a></li>
				</ul>
			</div>
			
			<div class="logo"> 
				<img src="../image/logo.jpg" alt="">
			<div class="hot">
				历史搜索
			</div>
				<p>没有搜索历史</p>
			</div>
</section>

</template>

<style type="text/css">
	header>ul{
				width: 100%;
				height: 1.3rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				padding: .3rem;
				font-size: .5rem;

		}
		header>ul>li{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 1.3rem;
			line-height: 1.3rem;
			width: 33.3333%;
			text-align: center;
		}
		header>ul>li:last-of-type{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 17%;
		}
		.search{
			height: .8rem;
			width: 94%;
			border: .04rem solid #eee;
			display: flex;
			margin-left: .25rem;
			font-size: .4rem;
		}
		.search>input{
			width: 70%;
			font-size: .4rem;
			border: none;
			outline: none;
		}
		.search>a{
			line-height: .8rem;
			text-align: center;
			width: 15%;	
			color: #d30775;
		}
		.search>span{
			display: block;
			line-height: .8rem;
			width: 10%;

		}
		.search>span>img{
			margin-top: .25rem;
		}
		.hot{
			width: 100%;
			height: .8rem;
			line-height: .8rem;
			background: #eee;
			margin-top: .2rem;
			padding-left: .35rem;
			opacity: .8;
		}
		.cent{
			padding: .2rem;
		}
		.cent>ul>li{
			float: left;
			height: .7rem;
			line-height: .05rem;
			padding: .4rem;
			margin: .15rem;
			border: .04rem solid red;
			border-radius: .15rem;
		}
		.cent>ul>li>a{
			height: .7rem;
			display: block;
			font-size: .4rem;
			
		}
		.logo{
			width: 100%;
			height: 5rem;
			background: #fff;
		}
		.logo>img{
			width: 100%;
			height: 2rem;
		}
		.logo>p{
			width: 100%;
			height: 1.6rem;
			font-size: .4rem;
			text-align: center;
			color: #ccc;
			margin-top: .5rem;
		}
</style>